Day22 六角 Off Canvas #1

簡單小語

選單選單選單，各式各樣，基礎練習不能少，每次在RWD時的menu轉換都是一種練習，掌握每個物件的位置及排列方式，就可以慢慢找出脈絡，讓自己更清楚寫完的程式碼會呈現怎麼樣的樣式，參考網路範例就試著自己切出來看看，增強能力也給予自己信心(雖然現在還有點不足就是)，記得要縮放畫面查看哦，不然一點進去看只發現稀飯版，那還真是微微丟臉，刻意練習，期許自己更強，更有能力在求職中談條件，投資自己是最便宜的事情。

筆記分享

1. 這次的header與先前沒有什麼不同，只是更加掌握padding,margin的使用。
2. 點擊事件的推移，要清楚知道什麼要動，要移動多少，用left與transform:translateX()搭配。
3. font-awesome的垂直置中使用flex,align-items，但總覺得有更好的方式，濫用flex成癮。
4. btn的變化是使用transform:rotate()製作，缺點是不能加入transition，會看起來很詭異。
5. hover的效果推移使用padding-left。
6. .menu設定高度100vh(螢幕高)，為了有空間加入background-color。
7. 讓a用display:block可以撐開整個li並讓整條都呈現點擊樣式。
8. li與a的互相搭配，勤加練習，可以掌握樣式的選擇，例如要加底線要用在li還是a。
9. 增加border後會發現hover時li會晃動，因此需要先給自己一個透明的border，才不會導致撐開晃動。
10. RWD，根據Amos老師建議是手機先做，手機用戶持續攀升中。

刻意練習

Practice(200815 Day 22)

首次練習

200630_Off Canvas 選單切換

2020 iT邦幫忙鐵人賽 Day22 網頁前端-刻意練習(Off Canvas #1)